﻿@model HomeControllerModel.Index
<div class="my-main">
    @using (Html.BeginForm())
    {
        <div class="ui-box  ui-box-alpha">
            <div class="ui-box-head">
                <div class="ui-box-head-border">
                    <div class="ui-box-head-title">
                        物流中心</div>
                    <span class="ui-box-head-text">发货</span> <a href="#" class="ui-box-head-more">去购物</a>
                </div>
            </div>
            <div class="ui-box-container">
                <div class="ui-box-content">
                    dd</div>
            </div>
            <div class="ui-box-container-noborder">
                <div class="ui-box-content">
                </div>
            </div>
            <div class="ui-box-container-noborder">
                <div class="ui-box-container-head">
                    确认收货信息及交易详情</div>
                <div class="ui-box-content">
                    <table class="ui-table ui-table-alpha">
                        <thead>
                            <tr>
                                <th colspan="2" class="text-align-left">
                                    <label style="margin: 0; display: inline;">
                                        <input class="inline" type="checkbox" style="margin: 0;" onclick='if(this.checked==true){$("input[name=subId]").check();}else{$("input[name=subId]").uncheck();}' />
                                        全选
                                    </label>
                                    <span>订单编号：@(Model.Order.Id)</span><span class="pull-right">创建时间：@Model.Order.CreatedOn.ToString("yyyy-MM-dd HH:mm")</span>
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="span6" style="border-right: 1px solid #CCCCCC;">
                                    @foreach (var item in Model.Order.OrderItems.Where(o=>!Model.Shippings.Contains(o.Id)))
                                    {
                                        <div class="row-fluid" style="border-bottom: 1px dashed #CCC;">
                                            <div class="span1">
                                                <input type="checkbox" name="subId" value="@(item.Id.TrimEnd())" /></div>
                                            <div class="span11">
                                                <div>
                                                    <div class="media">
                                                        <a target="_blank" href="" class="pull-left">
                                                            <img src=""
                                                                style="width: 64px; height: 64px;" alt="64x64" class="media-object" data-src="holder.js/64x64">
                                                        </a>
                                                        <div class="media-body">
                                                            <h5 class="media-heading">
                                                                @item.Title
                                                            </h5>
                                                            <ul class="unstyled">
                                                                @foreach (var p in item.Properties.Split(';').OrderBy(o => o.Length))
                                                                {
                                                                    <li>@p </li>
                                                                }
                                                                <li class="text-align-right">@(item.Price.ToString("N"))
                                                                    × @(item.Quantity)</li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    }
                                </td>
                                <td class="text-align-left" style="vertical-align: top;">
                                    <div>
                                        <p>
                                            我的备忘：</p>
                                        <p>
                                            <textarea name="extra" cols="50" rows="3"></textarea></p>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="2" class="text-align-left" style="padding: 0">
                                    <div class="address-list-item">
                                        <div class="row-fluid">
                                            <div class="span8">
                                                <div class="address-list-item-content">
                                                    <p>
                                                        <strong title="测试啊">@(Model.Order.Receiver)</strong> <span>(13718414243 )</span>
                                                    </p>
                                                    <p>
                                                        @(Model.Order.Province)
                                                        @(Model.Order.City)
                                                        @(Model.Order.District)
                                                        @(Model.Order.Address)
                                                        (@(Model.Order.PostalCode))
                                                    </p>
                                                </div>
                                            </div>
                                            <div class="span2 address-list-item-actions">
                                                <span>收货地址</span>
                                            </div>
                                            <div class="span2 address-list-item-actions">
                                                <div class="dropdown">
                                                    <a title="修改收货信息" href="javascript:void(0);" data-toggle="dropdown"><i class="icon-pencil">
                                                    </i>&nbsp; 修改收货信息</a>
                                                    <ul class="dropdown-menu text-align-left pull-right" style="width: 600px;" onclick="event.preventDefault();event.stopPropagation();">
                                                        <li>
                                                            <ul class="unstyled">
                                                                <li class="disabled"><a>收货信息：</a> </li>
                                                                <li class="divider"></li>
                                                            </ul>
                                                        </li>
                                                        <li>
                                                            <div style="margin: 0 20px 10px;">
                                                                <div class="row-fluid">
                                                                    <div class="span2">
                                                                        收货地址：
                                                                    </div>
                                                                    <div class="span10">
                                                                    <span>
                                                                        @Html.DropDownList("receiver.province", Model.Province, new { id = string.Empty, @class = "span4", onchange = "areaChange(this)" })
                                                                        @Html.DropDownList("receiver.city", Model.City, new { id = string.Empty, @class = "span4", onchange = "areaChange(this)" })
                                                                        @Html.DropDownList("receiver.areaId", Model.District, new { id = string.Empty, @class = "span4", onchange = "areaChange(this)" })
                                                                       </span> <input name="receiver.Address" type="text" value="@(Model.Order.Address)" />
                                                                        <p class="help-inline">
                                                                            街道地址（不需要填写省市区）</p>
                                                                    </div>
                                                                </div>
                                                                <div class="row-fluid">
                                                                    <div class="span2">
                                                                        联系人：
                                                                    </div>
                                                                    <div class="span10">
                                                                        <input name="receiver.Name" type="text" value="@(Model.Order.Receiver)" />
                                                                    </div>
                                                                </div>
                                                                <div class="row-fluid">
                                                                    <div class="span2">
                                                                        电话号码：
                                                                    </div>
                                                                    <div class="span10">
                                                                        <input name="receiver.Phone" type="text" value="@(Model.Order.Phone)" />
                                                                        <p class="help-inline">
                                                                            格式：区号 - 电话号码 - 分机号</p>
                                                                    </div>
                                                                </div>
                                                                <div class="row-fluid">
                                                                    <div class="span2">
                                                                        手机号码：
                                                                    </div>
                                                                    <div class="span10">
                                                                        <input name="receiver.Mobile" type="text" value="@(Model.Order.Mobile)" />
                                                                        <p class="help-inline">
                                                                            电话和手机请至少填写一个
                                                                        </p>
                                                                    </div>
                                                                </div>
                                                                <div class="row-fluid">
                                                                    <div class="span2">
                                                                        邮政编码：
                                                                    </div>
                                                                    <div class="span10">
                                                                        <input id="postalCode" name="receiver.PostalCode" type="text" value="@(Model.Order.PostalCode)" />
                                                                    </div>
                                                                </div>
                                                                <div class="row-fluid">
                                                                    <div class="offset2 span4">
                                                                        <button type="button" class="btn">
                                                                            取 消</button>
                                                                    </div>
                                                                    <div class="span6">
                                                                        <input type="hidden" name="receiver.AreaId" value="420303865" />
                                                                        <button type="button" class="btn btn-primary">
                                                                            确 认</button>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="ui-box-container-noborder">
                <div class="ui-box-container-head">
                    确认发货/退货信息</div>
                <div class="ui-box-content">
                    <div style="border: 1px solid #DCDFE5;">
                        <div class="address-list">
                            <div class="address-list-item  address-list-item-default" id="address-1">
                                <div class="row-fluid">
                                    <div class="span8">
                                        <div class="address-list-item-content">
                                            <p>
                                                <strong title="测试啊">测试啊</strong> <span>(13718414243 )</span>
                                            </p>
                                            <p>
                                                @(UserAddress.GetAreaName("420303", Model.Areas))
                                                不知道 (420000)</p>
                                        </div>
                                    </div>
                                    <div class="span2 address-list-item-actions">
                                        <span>发货地址</span>
                                    </div>
                                    <div class="span2 address-list-item-actions">
                                        <div class="dropdown">
                                            <a title="修改发货信息" href="javascript:void(0);" data-toggle="dropdown"><i class="icon-pencil">
                                            </i>&nbsp; 修改发货信息</a>
                                            <ul class="dropdown-menu text-align-left pull-right" style="width: 700px;">
                                                <li onclick="event.preventDefault();event.stopPropagation();">
                                                    <ul class="unstyled">
                                                        <li class="disabled"><a>请选择合适的发货地址：</a> </li>
                                                        <li class="divider"></li>
                                                        <li class="disabled"><a style="line-height: 24px;">
                                                            <div class="row-fluid">
                                                                <div class="span2">
                                                                    测试啊
                                                                </div>
                                                                <div class="span6">
                                                                    不知道 420303
                                                                </div>
                                                                <div class="span4">
                                                                    13718414243
                                                                    <input type="hidden" name="sendAddressId" value="7" />
                                                                </div>
                                                            </div>
                                                        </a></li>
                                                    </ul>
                                                </li>
                                                @foreach (var o in Model.Addresses)
                                                {
                                                    <li><a style="line-height: 24px;" href="javascript:void(0);">
                                                        <div class="row-fluid">
                                                            <div class="span2">@o.Name
                                                            </div>
                                                            <div class="span6">@(UserAddress.GetAreaName(o.AreaId, Model.Areas))
                                                                @o.Address (@o.PostalCode)
                                                            </div>
                                                            <div class="span4">@o.Mobile 0571-12345678-123
                                                            </div>
                                                        </div>
                                                    </a></li>
                                                }
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="address-list-item address-list-item-last" id="address-2">
                                <div class="row-fluid">
                                    <div class="span8">
                                        <div class="address-list-item-content">
                                            <p>
                                                <strong title="发货人">发货人</strong> <span>(13718414243 )</span>
                                            </p>
                                            <p>
                                                湖北 十堰市 张湾区 不知道 (420000)</p>
                                        </div>
                                    </div>
                                    <div class="span2 address-list-item-actions">
                                        <span>退货地址</span>
                                    </div>
                                    <div class="span2 address-list-item-actions">
                                        <div class="dropdown">
                                            <a title="修改退货信息" href="javascript:void(0);" data-toggle="dropdown"><i class="icon-pencil">
                                            </i>&nbsp; 修改退货信息</a>
                                            <ul class="dropdown-menu text-align-left pull-right" style="width: 700px;">
                                                <li onclick="event.preventDefault();event.stopPropagation();">
                                                    <ul class="unstyled">
                                                        <li class="disabled"><a>请选择合适的退货地址：</a> </li>
                                                        <li class="divider"></li>
                                                        <li class="disabled"><a style="line-height: 24px;">
                                                            <div class="row-fluid">
                                                                <div class="span2">
                                                                    测试啊
                                                                </div>
                                                                <div class="span6">
                                                                    不知道 420303
                                                                </div>
                                                                <div class="span4">
                                                                    13718414243
                                                                    <input type="hidden" name="refundAddressId" value="7" />
                                                                </div>
                                                            </div>
                                                        </a></li>
                                                    </ul>
                                                </li>
                                                @foreach (var o in Model.Addresses)
                                                {
                                                    <li><a style="line-height: 24px;" href="javascript:void(0);">
                                                        <div class="row-fluid">
                                                            <div class="span2">@o.Name
                                                            </div>
                                                            <div class="span6">@(UserAddress.GetAreaName(o.AreaId, Model.Areas))
                                                                @o.Address (@o.PostalCode)
                                                            </div>
                                                            <div class="span4">@o.Mobile 0571-12345678-123
                                                            </div>
                                                        </div>
                                                    </a></li>
                                                }
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="ui-box-container-noborder">
                <div class="ui-box-container-head">
                    选择物流服务</div>
                <p>
                </p>
                <div class="tabbable">
                    <ul class="nav nav-tabs" style="padding-left: 40px;">
                        <li class="active"><a href="#1">在线下单</a></li>
                        <li><a href="#2">自己联系物流</a></li>
                        <li><a href="#3">无需物流</a></li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane active">
                            <div class="ui-box-content">
                                <table class="ui-table ui-table-alpha">
                                    <thead>
                                        <tr>
                                            <th class="span4 text-align-left">
                                                公司名称
                                            </th>
                                            <th class="span4 text-align-left">
                                                运单号码
                                            </th>
                                            <th class="span2 text-align-left">
                                                备 注
                                            </th>
                                            <th class="span2">
                                                操 作
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach (var o in Model.LogisticsCompanies.Take(5))
                                        {
                                            <tr class="item-header">
                                                <td class="text-align-left">
                                                    @o.Name
                                                </td>
                                                <td class="span4 text-align-left">
                                                    <input type="text" id="express-1-@(o.Id)" class="input-medium" style="margin-bottom: 0;" />
                                                </td>
                                                <td class="text-align-left">
                                                    asdf
                                                </td>
                                                <td>
                                                    <button type="button" class="btn" onclick="submitExpress(1, @(o.Id));">
                                                        确 认</button>
                                                </td>
                                            </tr>
                                        }
                                    </tbody>
                                    <tbody id="more-companies" class="hide">
                                        @foreach (var o in Model.LogisticsCompanies.Skip(5))
                                        {
                                            <tr class="item-header">
                                                <td class="text-align-left">
                                                    @o.Name
                                                </td>
                                                <td class="span4 text-align-left">
                                                    <input type="text" id="express-1-@(o.Id)" class="input-medium" style="margin-bottom: 0;" />
                                                </td>
                                                <td class="text-align-left">
                                                    asdf
                                                </td>
                                                <td>
                                                    <button type="button" class="btn" onclick="submitExpress(1, @(o.Id));">
                                                        确 认</button>
                                                </td>
                                            </tr>
                                        }
                                    </tbody>
                                    <tfoot>
                                        <tr>
                                            <td colspan="4">
                                                <a href="javascript:void(0)" onclick="$('#more-companies').toggle();$(this).children().toggleClass('icon-chevron-down icon-chevron-up');">
                                                    <i class="icon-chevron-down"></i>其它物流公司</a>
                                            </td>
                                        </tr>
                                    </tfoot>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    }
</div>
@section css{
    <style type="text/css">
        .dropdown-menu:after { border-bottom: 6px solid #FFFFFF; border-left: 6px solid transparent; border-right: 6px solid transparent; content: ""; display: inline-block; right: 10px; position: absolute; top: -6px; }
        .dropdown-menu:before { border-bottom: 7px solid rgba(0, 0, 0, 0.2); border-left: 7px solid transparent; border-right: 7px solid transparent; content: ""; display: inline-block; right: 9px; position: absolute; top: -7px; }
    </style>
}
@section js{
    @Url.Ayatta().StaticJs("china.area")
    <script type="text/javascript">
        function areaChange(obj) {
            var val = $(obj).val();
            if (val.length == 6) {
                var postalCode = _.findWhere(ChinaAreas, { Id: val }).Id;
                $("#postalCode").val(postalCode);
                return;
            }
            $(obj).nextAll('input').html("<option>请选择</option>");
            var citys = _.where(ChinaAreas, { ParentId: val });
            var array = [];
            array.push("<option>请选择</option>");
            _.each(citys, function (o) {
                array.push("<option value=" + o.Id + ">" + o.Name + "</option>");
            });
            $(obj).next().html(array.join(""));
        }
        function submitExpress(categoryId, companyId) {
            $("input[name='expressno']").removeAttr("name");
            var id = $.format("express-{0}-{1}", categoryId, companyId);
            var element = document.getElementById(id);
            element.setAttribute("name", "expressno");
            var form = document.getElementsByTagName('form')[0];
            var param = $(form).serialize();
            $.postJSON(form.action, param, function (result) {
                console.log(result);
            });
        }

    </script>
}
